<%@ page language="java" pageEncoding="UTF-8"%>
<!--分页查询共用的页面-->
<%@ include file="/common/paginateUtil.jsp"%>

<script src="http://cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js"></script>
</head>

		<script type="text/javascript" charset="utf-8">

            var sockjsClient = null;
            function startWebSocket()
            {
                var me = this;
                var sockjsAddr = globalConfig.webPath + "/ws/jt808Message";

                var onopen = function() {
                    console.log('open');
                    //$("#status").val("已连接");
                    try {
                        var isSendSuccess = sockjsClient.send("hello");
                        if (!isSendSuccess) {
                            console.log("发送失败");
                        } else
                        {
                            console.log("成功");
                        }
                    } catch (e) {
                        console.log("发送失败");
                    }
                };
                var onmessage = function(e) {
                    try
                    {
                        insertRow(e.data);
                    }
                    catch (e)
                    {
                        console.log('error:' + e);
                    }
                };
                var onclose = function() {
                    console.log('close');
                    me.startWebSocket();
                    //$("#status").val("未连接");
                };

                var id = "1";
                sockjsClient = new SockJS(sockjsAddr + "/" + id);
                sockjsClient.onopen = onopen;
                sockjsClient.onmessage = onmessage;
                sockjsClient.onclose = onclose;
            }

            function insertRow(messaages)
			{
                var messagList = JSON.parse(messaages);
                var me = this;

                var isPop = false;
                $.each(messagList, function(i,message)
                {
                    // insert a new row at second row position
                    $('#queryGrid').datagrid('insertRow',{
                        index: 0,	// index start with 0
                        row: message
                    });


                });

                var rows = $('#queryGrid').datagrid('getRows');
                var m = rows.length;
                while(m-- > 500)
				{
                    $('#queryGrid').datagrid('deleteRow',m);
				}
			}

			

			$(document).ready(function() {
                startWebSocket();
                $('#queryGrid').datagrid({
                    rowStyler:function(index,row){
                        if (row.messageType.indexOf("0x0")>= 0){
                            return 'background-color:pink;color:blue;font-weight:bold;';
                        }
                    }
                });

            } );
		</script>
<body>
		<div id="toolbar" >		
			
			<form id="queryForm" action="<%=ApplicationPath%>/basicData/paginate.action">
			   <input type="hidden" name="queryId" value="selectBasicData" />	
			  <table width="100%"  class="TableBlock">
			   			   <tr>
				   <td> 基础数据类型：	<select  id="parent" value=""
						name="parent"  > <option  value="Root1" selected></option></select>
			 <a id="btnQuery" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" >查询</a>&nbsp;
		   <a id="btnNew" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="newBasicData();" >新增</a>&nbsp;
        </td>
    </tr>
	</table>
		</form>	 
		</div>

			<table id="queryGrid" class="easyui-datagrid" title="" style="width:100%;"
						data-options="pagination:false,singleSelect:true,rownumbers:true,striped:true,fitColumns: false,
						fit:true,toolbar:'#toolbar'">
					<thead>
						<tr>
							<th data-options="field:'createDate'" width="70">时间</th>
							<th data-options="field:'messageType'" width="140">消息类型</th>
							<th data-options="field:'simNo'" width="110">sim卡号</th>
							<th data-options="field:'plateNo'" width="90">车牌号</th>
							<th data-options="field:'descr'" width="200">消息内容</th>
							<th data-options="field:'serialNo'" width="45"> 流水号</th>
							<th data-options="field:'messageLength'" width="40"> 长度</th>
							<th data-options="field:'packetDescr'" width="640"> 报文</th>
						</tr>
					</thead>
				</table>

</body>

